<template>
  <div>
    <!-- 数据卡片 -->
    <div class="card-box">
      <el-card shadow="always">Always</el-card>
      <el-card shadow="hover">Hover</el-card>
      <el-card shadow="never">Never</el-card>
      <el-card shadow="never">Never</el-card>
      <el-card shadow="never">Never</el-card>
      <el-card shadow="never">Never</el-card>
      <el-card shadow="never">Never</el-card>
    </div>

    <!-- 分割线 -->
    <div class="divider"></div>
    
    <div class="test2">
      <!-- 折线图 -->
      <div ref="chartRef2"></div>
      <!-- 环图 -->
      <div>
        <div ref="chartRef" style="width: 100%; height: 278px"></div>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="divider"></div>

    <!-- 饼图 -->
    <div class="test3">
      <div ref="chartRef3"></div>
    </div>
  </div>
</template>
  
  <script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chartRef2 = ref(null);

const attendanceData = [{ name: "出勤人数", data: [50, 48, 52, 45, 53] }];

const chartRef3 = ref(null);
const attendanceStatus = ref(["出勤人数", "缺勤人数"]);
const attendanceData1 = ref([
  { value: 19, name: "出勤人数", color: "#1ab394" },
  { value: 13, name: "缺勤人数", color: "red" },
]);

const attendanceDates = ["近一次", "近两次", "近三次", "近四次", "近五次"];

const chartRef = ref(null);

const opinionData2 = [
  { value: 1, name: '校园暴力行为', itemStyle: 'red' },
  { value: 45, name: '正常行为', itemStyle: '#1FC48D' },
  { value: 3, name: '睡觉行为', itemStyle: '#6DC8EC' },
  { value: 3, name: '玩手机行为', itemStyle: '#3F8FFF' }
];



onMounted(() => {
  drawLine1();
  drawPieChart();
  drawLine();
});

function drawLine1() {
  const chart = echarts.init(chartRef2.value);
  chart.setOption({
    title: {
      text: "近5次班级出勤情况",
      subtext: "",
      x: "left",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: attendanceDates,
      name: "",
    },
    yAxis: {
      type: "value",
      name: "出勤人数",
    },
    legend: {
      orient: "vertical",
      x: "center",
      y: "top",
      data: attendanceData.map((item) => item.name),
    },
    series: attendanceData.map((item) => ({
      name: item.name,
      data: item.data,
      type: "line",
    })),
  });
}
function drawPieChart() {
  const chart = echarts.init(chartRef3.value);
  chart.setOption({
    title: {
      text: "班级总体出勤情况",
      subtext: "",
      x: "left",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      bottom: "bottom",
      data: attendanceStatus.value,
    },
    series: [
      {
        name: "出勤数据",
        type: "pie",
        radius: "50%",
        center: ["50%", "50%"],
        data: attendanceData1.value,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 更新颜色
  chart.dispatchAction({
    type: "updateData",
    seriesIndex: 0,
    data: attendanceData1.value.map((item) => ({
      ...item,
      itemStyle: {
        normal: {
          color: item.color,
        },
      },
    })),
  });
}
function drawLine() {
  const chart = echarts.init(chartRef.value);
  chart.setOption({
    title: {
      text: '班级行为分析',
      subtext: '',
      x: 'left'
    },
    grid: { containLabel: true },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {d}%'
    },
    color: ['red', '#1FC48D', '#6DC8EC', '#3F8FFF'],
    legend: {
      orient: 'vertical',
      icon: 'circle',
      align: 'left',
      x: 'right',
      y: 'bottom',
      data: opinionData2.map(item => item.name)
    },
    series: [{
      name: '课堂行为',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      center: ['40%', '50%'],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: opinionData2
    }]
  });
}
</script>

<style scoped>
.card-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-box .el-card {
  width: calc(33.333% - 10px);
  height: 100px;
  box-sizing: border-box;
}

.test2,
.test3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 10px);
  height: 400px;
  box-sizing: border-box;
  margin: 0 5px;
}

.test2 > div,
.test3 > div {
  width: 100%;
  height: 278px;
}

.divider {
  width: 100%;
  height: 1px; /* 或者你想要的厚度 */
  background-color: #eaeaea; /* 分割线的颜色 */
  margin: 20px 0; /* 上下各20px的间距 */
}
</style>